<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('技术培训列表')" />
	<style>
		#bootstrap-table tr{
			border: 1px solid #ddd;
		}
		#bootstrap-table th{
			border: 1px solid #ddd;
		}

		.counter{
			color: #ffffff;
			display: block;
			font-size: 24px;
			font-weight: 600;
		}
		.text-right-btn{
			height: 96px;
			text-align: right;
		}
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">

			<div class="btn-group-sm">
				<div class="btn btn-success col-md-2 col-sm-2 col-lg-4 text-right-btn" >
					<span class="counter">培训期数</span>
					[[${traincount}]]
				</div>
				<div class="btn btn-primary  col-md-2 col-sm-2 col-lg-4 text-right-btn">
					<span class="counter"> 培训学员总数</span>
					[[${realcount}]]
				</div>
				<div class="btn btn-danger  col-md-2 col-sm-2 col-lg-4 text-right-btn">
					<span class="counter"> 培训老师总数</span>
					[[${teachercount}]]
				</div>
			</div>


	        <div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="statistics:statisticsTrain:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<!--<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="statistics:statisticsTrain:edit">-->
					<!--<i class="fa fa-edit"></i> 修改-->
				<!--</a>-->
				<!--<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="statistics:statisticsTrain:remove">-->
					<!--<i class="fa fa-remove"></i> 删除-->
				<!--</a>-->
				<a class="btn btn-warning" onclick="$.table.importExcel('importForm')">
						<i class="fa fa-download"></i> 导入
				 </a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>

			<div class="col-lg-12" >
				<div class="panel panel-border panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">统计柱状图   </h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar" style="height: 300px;width:1000px;" ></div>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar2" style="height: 300px;width:1000px;" ></div>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar3" style="height: 300px;width:1000px;" ></div>
					</div>
				</div>
			</div> <!-- col -->

		</div>
	</div>
    <div th:include="include :: footer"></div>
	 <script th:src="@{/js/echarts.common.min.js}"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('statistics:statisticsTrain:edit')}]];
        var removeFlag = [[${@permission.hasPermi('statistics:statisticsTrain:remove')}]];
        var prefix = ctx + "statistics/statisticsTrain";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                importUrl: prefix + "/importData",
                modalName: "技术培训",
		        showExport: true,
                columns: [
                    {field: "id", title: "id",valign:"middle", align:"center",visible: false},
                    {field: "unit", title: "培训单位",valign:"middle", align:"center",sortable: true},
                    /*  {field: "serial", title: "编号",valign:"middle", align:"center",sortable: true}, */
                    {field: "version", title: "软件版本",valign:"middle", align:"center",sortable: true},
                    /* {field: "trainunit", title: "培训单位",valign:"middle", align:"center",sortable: true}, */
                    {field: "trainstarttime", title: "培训开始时间",valign:"middle", align:"center",formatter:function(value,row){
                            if(null== row.trainstarttime){
                                return row.trainstarttime
                            }else{
                                return row.trainstarttime.substr(0,10)
                            }
                        },sortable: true},
                    {field: "trainendtime", title: "培训结束时间",valign:"middle", align:"center",formatter:function(value,row){
                            if(null== row.trainendtime){
                                return row.trainendtime
                            }else{
                                return row.trainendtime.substr(0,10)
                            }
                        },sortable: true},
                    {field: "realcount", title: "培训人数",valign:"middle", align:"center",sortable: true},
                    /* {field: "realcount", title: "实际人数",valign:"middle", align:"center",sortable: true}, */
                    /*  {field: "passcount", title: "合格人数",valign:"middle", align:"center",sortable: true},  */
                    {field: "daycount", title: "讲课天数",valign:"middle", align:"center",sortable: true},
                    {field: "period", title: "培训期次",valign:"middle", align:"center",sortable: true},
                    {field: "teachercount", title: "讲师人次",valign:"middle", align:"center",sortable: true},
                    {field: "teacher", title: "培训讲师",valign:"middle", align:"center",sortable: true},
                    {field: "remark", title: "备注",valign:"middle", align:"center",sortable: true},
                    {field: 'operate',title: "操作",valign:"middle", align:"center",
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="$.operate.edit('+row.id+')">修改</a> ');
                            actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove('+row.id+')">删除</a> ');
                            return actions.join('');
                        }
                    },
                ]
            };
            $.table.init(options);

            $("#bootstrap-table").on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
                var ids= getIdSelections();
                if(null!=ids && ids.length>0){
                    var count = ids.length;
                }else{

                }
            });
            function getIdSelections() {
                return $.map($("#bootstrap-table").bootstrapTable('getSelections'), function (row) {
                    return row.id
                });
            }

            var tempArray=[[${traincounts}]];
            var teampArray2=[[${trainpeoples}]];
            var teampArray3=[[${trainteachers}]];
            var dataArray=tempArray.split(',');
            var dataArray2=teampArray2.split(',');
            var dataArray3=teampArray3.split(',');

            var myChart = echarts.init(document.getElementById('echarts-bar'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                grid : {
                    left : 60,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['培训期次(次)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    minInterval : 1,
                    axisLabel:{formatter:'{value} '},
                    data:["0","1","2","5"]
                },
                series: [{
                    barWidth : 15,
                    name: '培训期次(次)',
                    type: 'bar',
                    data: dataArray,
                    itemStyle:{
                        normal:{
                            color:'#3c78b0'
                        }
                    },
                }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            var myChart2 = echarts.init(document.getElementById('echarts-bar2'));

            // 指定图表的配置项和数据
            var option2 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 60,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['培训人次(人)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探院北京总院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value} '}
                },
                series: [{
                    barWidth : 15,
                    name: '培训人次(人)',
                    type: 'bar',
                    data: dataArray2,
                    itemStyle:{
                        normal:{
                            color:'#e04c4c'
                        }
                    },
                }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);

            var myChart3 = echarts.init(document.getElementById('echarts-bar3'));

            // 指定图表的配置项和数据
            var option3 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 60,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['培训天数(天)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探院北京总院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value} '}
                },
                series: [{
                    barWidth : 15,
                    name: '培训天数(天)',
                    type: 'bar',
                    data: dataArray3,
                    itemStyle:{
                        normal:{
                            color:'#82c25b'
                        }
                    },
                }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option3);

        });
    </script>

	 <form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
		 <div class="col-xs-offset-1">
			 <input type="file" id="file" name="file"/>
			 <div class="mt10 pt5">
				 <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的问题数据
				 &nbsp;	<a href="http://211.149.205.33:18080/file/down/191127182650185" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
			 </div>
			 <font color="red" class="pull-left mt10">
				 提示：仅允许导入“xls”或“xlsx”格式文件！
			 </font>
		 </div>
	 </form>
</body>
</html>